<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>森冉AI</title>
  </head>
  <body>
    <div id="app">
      <div style="display: grid;place-items: center;height: 100vh;">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80px" height="80px"  viewBox="0 0 200 200" xml:space="preserve">
          <!--#4886CD为深色值   #9DBFE4为中间值 可以随意修改-->  
          <style type="text/css">
            .left{fill:url(#left);}
            .right{fill:url(#right);}
            .top{fill:#000000;}
            @keyframes load{
              0%{transform:rotate(0)}
              100%{transform:rotate(-360deg)}
            }
            #load{animation:load 1s  linear infinite; transform-origin:center center; } 
          </style>
          <g id="load">
            <linearGradient id="right" gradientUnits="userSpaceOnUse" x1="150" y1="20" x2="150" y2="180">
              <stop  offset="0" style="stop-color:#000000"/>
              <stop  offset="1" style="stop-color:#808080"/><!--蓝到浅蓝渐变-->
              </linearGradient>
              <path class="right" d="M100,0v20c44.1,0,80,35.9,80,80c0,44.1-35.9,80-80,80v20c55.2,0,100-44.8,100-100S155.2,0,100,0z"/><!--右半圆环-->
              <linearGradient id="left" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="50" y2="180">
              <stop  offset="0" style="stop-color:#FFFFFF"/>
              <stop  offset="1" style="stop-color:#808080"/><!--浅蓝到白色渐变-->
            </linearGradient>
            <path class="left" d="M20,100c0-44.1,35.9-80,80-80V0C44.8,0,0,44.8,0,100s44.8,100,100,100v-20C55.9,180,20,144.1,20,100z"/><!--左半圆环-->
            <circle class="top" cx="100" cy="10" r="10"/>
          </g>
        </svg>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script> 
  </body>
</html>
